<template>
  <div class="standardRangeTime">
    <a-range-picker
      v-model:value="query.dateRange"
      style="width: 300px"
      :placeholder="['开始时间', '结束时间']"
      show-time
      format="YYYY-MM-DD HH:mm"
      value-format="YYYY-MM-DD HH:mm:ss"
    />

    <div style="margin-top: 10px">
      <a-button type="primary" @click="printHandle"> 打印 </a-button>

      <div class="json-container">
        <pre class="json-display">{{ formattedJson }}</pre>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'

interface QueryData {
  dateRange: string[]
}

const query = reactive<QueryData>({
  dateRange: [],
})

const formattedJson = computed(() => {
  const formattedString = JSON.stringify(query, (key, value) => {
    return value
  }, 2)
  
  // 移除第一行的缩进，保留其他行的缩进
  const lines = formattedString.split('\n')
  if (lines.length > 0) {
    // 移除第一行的空白
    lines[0] = lines[0].trimStart()
  }
  
  return lines.join('\n')
})

const printHandle = () => {
  console.log('query', query)
}
</script>

<style lang="scss">
.standardRangeTime {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .json-container {
    margin-top: 10px;
  }

  .json-display {
    margin: 0;
    background: #f5f5f5;
    padding: 12px;
    border-radius: 4px;
    max-width: 100%;
    overflow-x: auto;
    white-space: pre;
    font-family: 'Courier New', Courier, monospace;
    line-height: 1.5;
    text-indent: 0;
  }
}
</style>
